<template>
  <nut-config-provider :theme="theme" :theme-vars="themeVars">
    <view class="commodity"
          :style="{backgroundColor: 'white',padding: themeVars.pagePadding,fontSize:'14px',height: '100vh'}">

      <nut-skeleton :loading="productInfoLoading" width="300px" height="15px" animated row="3">

        <view style="font-size: 16px;font-weight: bolder">
          {{ commodityInfo.name }}
        </view>


        <view style="display: flex;justify-content: space-between;width: 100%;margin-top: 20rpx;font-size: 12px;color: #ccc;">
          <nut-space>
            <view style="display: flex;font-size: 12px;color: #ccc;align-items: center">
              <IconFont name="star-n" size="13" color="#ccc"></IconFont>&nbsp;<span>{{
                commodityInfo.collectNum
              }}</span>
            </view>
            <view style="display: flex;font-size: 12px;color: #ccc;align-items: center">
              <IconFont name="eye" size="13" color="#ccc"></IconFont>&nbsp;<span>{{ commodityInfo.scanNum }}</span>
            </view>
          </nut-space>
          <view  >
            发布时间：{{ commodityInfo.createTime }}
          </view>

        </view>
        <view style="margin-top: 10px"
              @click="imgPreState.showPreview=true;imgPreState.imgData  =commodityInfo.productImg.split(',').map(url=>({src:url+ImgWaterMarker}))">
          <template v-if="commodityInfo.productImg">
            <image v-for="img in commodityInfo.productImg.split(',')"
                   mode="widthFix"
                   style=" box-sizing: border-box;width: 100%;margin-top: 2px" lazy-load
                   :src="img+ImgWaterMarker"></image>

          </template>
        </view>
        <view style="display: flex;justify-content: space-between;margin-top: 10px">
          <view style="width: 50%" class="single-line-text">
            联系人员：{{ commodityInfo.contactName }}
          </view>
          <view style="width: 50%" class="single-line-text">
            联系电话：{{ commodityInfo.contactPhone }}
          </view>
        </view>
        <view style="margin-top: 10px">
          联系地址：{{ commodityInfo.addrDetail }}
        </view>


        <nut-divider/>

        <!--产品详情-->
        <view>
          <view style="font-size: 16px;font-weight: bolder;color: red;text-align: center">产品详情</view>
          <view style="margin-top: 10px">{{ commodityInfo.detailDesc }}
          </view>
          <view style="margin-top: 10px"
                @click="imgPreState.showPreview=true;imgPreState.imgData  =commodityInfo.imgDesc.split(',').map(url=>({src:url+ImgWaterMarker}))">

            <template v-if="commodityInfo.imgDesc">
              <image v-for="img in commodityInfo.imgDesc.split(',')"
                     mode="widthFix"
                     style=" box-sizing: border-box;width: 100%;margin-top: 2px" lazy-load
                     :src="img+ImgWaterMarker"></image>

            </template>
          </view>

        </view>
      </nut-skeleton>


    </view>

    <view class="fixed-bottom">


      <view
          style="height: 100%;width: 50%;background: white;display: flex;justify-content: space-around;font-size: 10px;color: black">

        <view @click="Taro.navigateTo({url:'/pages/view/enterpriseIntro/index?id='+commodityInfo.enterpriseId})"
              style="display: flex;flex-direction: column;justify-content: space-around;align-items: center">


          <IconFont size="20"
                    name="https://sdztl.oss-cn-hangzhou.aliyuncs.com/tuowulian-offline/images/other/%E5%95%86%E5%AE%B61.png"
                    class="nut-icon-am-shake nut-icon-am-infinite"></IconFont>

          <view style="">查看厂家</view>
        </view>

        <view style="display: flex;flex-direction: column;justify-content: space-around;align-items: center"
              @click="collect(commodityInfo.id)">
          <IconFont
              v-if="commodityInfo.myIsCollect"
              size="20"
              name="star-n"
              color="#f00"
          ></IconFont>
          <IconFont
              v-else

              size="20"
              name="star-n"
              color="#dbdbdb"
          ></IconFont>
          <view>收藏</view>
        </view>

      </view>


      <view
          style="height: 100%;width: 50%;background: white;display: flex;justify-content: space-around;font-size: 10px;color: black">
        <view
            @click="Taro.makePhoneCall({phoneNumber: commodityInfo.contactPhone})"
            style="height: 100%;width: 50%;background: #fc591a;display: flex;justify-content: center;align-items: center">


          <IconFont
              size="20"
              name="https://sdztl.oss-cn-hangzhou.aliyuncs.com/tuowulian-offline/images/other/%E7%94%B5%E8%AF%9D.png"
          ></IconFont>
          <view style="font-size: 12px;margin: 0 5px;color: white">电话联系</view>

        </view>
        <view
            @click="showWx=true"
            style="height: 100%;width: 50%;background: #00a22b;display: flex;justify-content: center;align-items: center">


          <IconFont
              size="20"
              name="https://sdztl.oss-cn-hangzhou.aliyuncs.com/tuowulian-offline/images/other/%E5%BE%AE%E4%BF%A1.png"
          ></IconFont>
          <view style="font-size: 12px;margin: 0 5px;color: white">微信沟通</view>

        </view>
      </view>

      <nut-action-sheet v-model:visible="showWx" title="微信沟通">
        <view style="padding: 0 10px">
          <view v-if="commodityInfo.enterpriseWechatQrcode">
            <image v-for="img in commodityInfo.enterpriseWechatQrcode.split(',')"
                   style=" box-sizing: border-box;width: 100%;height:400px;margin-top: 2px" lazy-load
                   mode="widthFix" :show-menu-by-longpress="true"
                   :src="img"></image>
          </view>
        </view>

      </nut-action-sheet>

      <nut-image-preview :show="imgPreState.showPreview" :images="imgPreState.imgData"
                         @close="imgPreState.showPreview = false" @long-press="longPressSaveImg"/>
    </view>

  </nut-config-provider>
</template>

<script>

import {ref} from 'vue';
import useTheme from "../../../hooks/useTheme";
import {Search2} from '@nutui/icons-vue-taro'
import Opportunity from "../../../components/opportunity/index.vue";
import SpecCommodity from "../../../components/specCommodity/index.vue";
import {IconFont, Image} from "@nutui/icons-vue";
import Taro from "@tarojs/taro";
import Shop from "../../../components/shop/index.vue";
import {twEnterpriseGetById} from "../../../api/enterprise";
import {twProductCollect, twProductEnterprisePage, twProductMyDetail} from "../../../api/product";
import {longPressSaveImg} from "../../../utils/imgUtils";
import {ImgWaterMarker} from "../../../api/constant";

const {theme, themeVars} = useTheme()
const commodityInfo = ref({})

const collect = (id) => {
  twProductCollect({id: id}).then(res => {
    if (200 == res.code) {
      Taro.showToast({title: res.msg, icon: 'success', duration: 1500,});
      getProductDetail(id)
    }
  }).finally(()=>{
    Taro.hideLoading();
  })
}

const productInfoLoading = ref(false)
const getProductDetail = (id) => {
  productInfoLoading.value = true;
  twProductMyDetail(id).then(res => {
    commodityInfo.value = res.data
  }).finally(() => {
    productInfoLoading.value = false
  })
}


const imgPreState = ref({
  showPreview: false,
  imgData: []
})

const showWx = ref(false);

export default {
  methods: {longPressSaveImg},
  components: {IconFont},

  // 可以使用所有的 Vue 生命周期方法
  mounted() {
  },

  onLoad(options) {
    getProductDetail(options.id)


  },

  onReady() {
  },

  onShow() {
  },

  onHide() {
  },

  onPullDownRefresh() {

  },
  onReachBottom() {
    console.log("onReachBottom")
  },


  setup() {


    return {
      theme,
      themeVars,
      commodityInfo,
      Taro,
      collect,
      imgPreState,
      productInfoLoading,
      showWx,
      ImgWaterMarker
    }
  }

}

</script>

<style>

.commodity {
  display: flex;
  flex-direction: column;

}

.enterpriseInfo {
  margin-left: 10px;

}

.enterpriseTop {
  display: flex;
  justify-content: space-between;
}

.shop-addr {
  font-size: 24px;
  color: #636363;
  margin-top: 10px;
  width: 450px;
  height: 60px;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #333; /* 背景颜色 */
  color: #fff; /* 字体颜色 */
  text-align: center; /* 文本居中 */
  display: flex;
  justify-content: space-between;
}
</style>